import React, { PureComponent, createRef,forwardRef } from 'react'

// function HelloWord() {

//   return (
//     <div>hello word</div>
//   )
// }

const HelloWord = forwardRef(
  function (props,ref) {
    return (
      <div>
        <div ref={ref}>hello word</div>
      <p>2333</p>
      </div>
    )
  })


export class App extends PureComponent {
  constructor() {
    super()
    this.hwRef = createRef()
  }
  getNativeDOM() {
    console.log(this.hwRef.current);
    // this.hwRef.current.test() 
  }
  render() {
    return (
      <div>
        {/* ref 仅作用于 类组件；  函数组件 使用 forwardRef */}
        <p>App - ref</p>
        <HelloWord ref={this.hwRef} />
        <button onClick={() => this.getNativeDOM()}>获取DOM</button>
      </div>
    )
  }
}

export default App